<script setup lang="ts">
import {getCurrentInstance, ref} from 'vue'
import Navigation from "@/components/homepageComponents/Navigation.vue"
import SearchBar from '@/components/homepageComponents/SearchBar.vue';

const filmList = ref([])
const global=getCurrentInstance().appContext.config.globalProperties;
global.$http.post('/public/film/queryall',{
  params:{
  }
})
    .then(resp=>{
      console.log(resp)
      filmList.value=resp.data;
    })
    .then(err=>{
      new Error(err);
    })

const filmslideshowlist = ref([])
const global1=getCurrentInstance().appContext.config.globalProperties;
global1.$http.post('/public/slideshow/query',{
    slideshowtype:2
})
    .then(resp=>{
      console.log(resp)
      filmslideshowlist.value=resp.data;
    })
    .then(err=>{
      new Error(err);
    })


</script>

<template>
  <el-affix :offset-top="0" :z-index="999">
  <search-bar/>
  <!-- 热映 影院 -->
  <el-row>
    <el-col :span="12" style="border:1px solid black;border-radius: 4px;text-align: center;background: darkgrey;color: #f8f8f8">
      <span>热映</span>
    </el-col>
    <el-col :span="12" style="border:1px solid black;border-radius: 4px;text-align: center;background: #eeeeee">
      <router-link to="/CinemaView" style="color: black;text-decoration: none;">
        <span>影院</span>
      </router-link>
    </el-col>
  </el-row>
  </el-affix>
  <!-- 轮播图 -->
  <div>
    <el-carousel height="110px">
      <el-carousel-item v-for="(item, slideshowid) in filmslideshowlist" :key="slideshowid">
        <img :src="item.slideshowurl" class="carousel-image">
      </el-carousel-item>
    </el-carousel>
  </div>

  <!-- 电影列表 -->
  <el-row v-for="item in filmList" :key="item.filmid">
    <el-col :span="6">
      <el-image :src="item.filmurl"></el-image>
    </el-col>
    <el-col :span="14">
      <div class="film-container">
        <div class="film-information">
          <router-link
              :to="{ name: 'FilmDetailsView', params: { filmid: item.filmid } }"
              style="color: black;text-decoration: none;"
          >
            <div style="font-weight: bold; font-size: 18px">{{ item.filmname }}</div>
          </router-link>
          <div style="font-size: 15px">猫眼评分{{ item.filmscore }}</div>
          <div style="font-size: 15px" class="single-line-ellipsis">主演：{{ item.filmstarring }}</div>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <router-link to="/CinemaView" style="color: black;text-decoration: none;">
        <div class="buy">购买</div>
      </router-link>
    </el-col>
  </el-row>
  <Navigation/>
</template>

<style scoped>
.single-line-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}
.film-container {
  height: 120px;
  display: flex;
}
.film-information {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
}
.buy {
  margin-top: 45px;
  margin-right: 5px;
  background: red;
  color: #f8f8f8;
  text-align: center;
  border-radius: 8px;
}
</style>